.navWrap {
    width: 100%;              /* 设置导航容器的宽度为其父元素的 100% */
    min-width: 1200px;       /* 设置导航容器的最小宽度为 1200 像素，防止在小屏幕上变得太小 */
    background: #0b6cb8;     /* 设置背景颜色为十六进制颜色 #0b6cb8（蓝色） */
    height: 50px;            /* 设置导航容器的高度为 50 像素 */
    line-height: 50px;       /* 设置行高为 50 像素，使文本在导航容器内垂直居中 */
    margin: 0 auto;          /* 上下外边距为 0，左右外边距自动，使导航容器水平居中 */
    position: relative;       /* 设置相对定位，这样子元素可以相对于此容器进行绝对定位 */
    z-index: 9999;           /* 设置 z-index 为 9999，确保导航层级高于其他元素，使其可见 */
}

* {
    margin: 0;                /* 将所有元素的外边距设置为 0，消除默认的外边距，以便更好地控制布局 */
    padding: 0;               /* 将所有元素的内边距设置为 0，消除默认的内边距，确保以一致的方式开始样式设置 */
    list-style-type: none;    /* 对于所有列表元素（ul、ol等），取消默认的项目符号或编号样式 */
}

.flexslider {
    position: relative;       /* 设置相对定位，使得子元素可以使用绝对定位来相对于此容器进行定位 */
    width: 100%;             /* 设置宽度为 100%，使其填满父容器的宽度 */
    height: 300px;           /* 设置高度为 300 像素，为幻灯片提供一个固定的高度 */
    overflow: hidden;        /* 隐藏超出此容器边界的内容，这样滑块之外的内容不会显示 */
}

.slides {
    position: relative;       /* 设置相对定位，以便可以进行绝对位置设置（例如，子元素） */
    margin: 0;               /* 消除默认的外边距，保证布局的一致性 */
    padding: 0;              /* 消除默认的内边距，保持干净的列表样式 */
    list-style: none;        /* 移除列表项目的默认样式，通常不需要列表项目符号 */
    overflow: hidden;        /* 隐藏超出此容器边界的内容，保持显示区域干净 */
    display: flex;           /* 将子元素以 flexbox 布局排列，使其在一行中显示，并支持动态调整 */
    height: 300px;           /* 设置高度为 300 像素，与 .flexslider 的高度匹配 */
    width: 4800px;           /* 设置宽度为 4800 像素，宽度足够容纳多个幻灯片，通常用于水平排列的幻灯片 */
    animation: sld 12s infinite; /* 应用 CSS 动画 'sld'，每 12 秒循环一次，让幻灯片自动轮播 */
}